<template>
  <div class="yxp-course" @click="bodyClick('body')">
    <TopBack :title="'语音流畅性训练'" :id="toNumber(userid)" type="1" />
    <div class="yxp-scene-main">
      <div class="main-box">

        <div class="main-box-item">
          <div class="listen-item" ref="readyPoint">
              <span></span>
              <span></span>
              <span></span>
          </div>
          <div class="content">
            <div class="content-wrap retell-box keep-box scrolToMinView" v-if="!isReset && !isStart && !isControl">
              <template>
                <template v-if="articleType === 1 || articleType === 5">
                  <span v-html="enHead"  :style="{display: 'block',color: '#333'}"></span>
                  <span class="section" v-for="(item,i) in enText" :key="'e' + i" :style="{'margin-left': item.isStart ? '40px' : 0}" :class="{active: item.isRead,read: item.isNum > 0 && !item.isRead}"  v-html="item.word"></span>
                  <span v-html="enEnd" :style="{float: 'right',overflow: 'hidden',color: '#333'}"></span>
                </template>
                <template v-else-if="articleType === 2">
                  <span v-html="enHead"  :style="{display: 'block','text-align': 'center',color: '#333'}"></span>
                  <span class="section" v-for="(item,i) in enText" :key="'e' + i" :style="{'margin-left': item.isStart ? '40px' : 0}" :class="{active: item.isRead,read: item.isNum > 0 && !item.isRead}"  v-html="item.word"></span>
                  <span v-html="enEnd" :style="{float: 'right',overflow: 'hidden',color: '#333'}"></span>
                </template>
                <template v-else-if="articleType === 3">
                  <span v-html="enHead"  :style="{display: 'block','text-align': 'center',color: '#333'}"></span>
                  <span class="section" v-for="(item,i) in enText" :key="'e' + i" :style="{'margin-left': item.isStart ? '40px' : 0}" :class="{active: item.isRead,read: item.isNum > 0 && !item.isRead}"  v-html="item.word" ></span>
                </template>
                <template v-else-if="articleType === 4">
                  <span v-html="enHead" :style="{display: 'block',color: '#333'}"></span>
                  <span class="section" v-for="(item,i) in enText" :key="'e' + i" :style="{'margin-left': item.isStart ? '40px' : 0}" :class="{active: item.isRead,read: item.isNum > 0 && !item.isRead}"  v-html="item.word" ></span>
                </template>
                <template v-else>
                  <span class="section" v-for="(item,i) in enText" :key="'e' + i" :style="{'margin-left': item.isStart ? '40px' : 0}" :class="{active: item.isRead,read: item.isNum > 0 && !item.isRead}"  v-html="item.word" ></span>
                </template>
              </template>
            </div>
            <!-- <div class="retell-wrap-scroll"> -->
                 <div class="content-wrap retell-box retell-wrap scrolToMinView"  v-if="!isReset && !isStart && isControl">
                  <template>
                    <template v-if="articleType === 1 || articleType === 5">
                      <span v-html="enHead"  :style="{display: 'block',color: '#333'}"></span>
                      <span v-for="(item,i) in enText" :key="'e' + i" :style="{'margin-left': item.isStart ? '40px' : 0}" v-html="item.word" style="color: #333"></span>
                      <span v-html="enEnd" :style="{float: 'right',overflow: 'hidden',color:'#333'}"></span>
                    </template>
                    <template v-else-if="articleType === 2">
                      <span v-html="enHead"  :style="{display: 'block','text-align': 'center',color: '#333'}"></span>
                      <span v-for="(item,i) in enText" :key="'e' + i" :style="{'margin-left': item.isStart ? '40px' : 0}" v-html="item.word" style="color: #333"></span>
                      <span v-html="enEnd" :style="{float: 'right',overflow: 'hidden',color: '#333'}"></span>
                    </template>
                    <template v-else-if="articleType === 3">
                      <span v-html="enHead"  :style="{display: 'block','text-align': 'center',color: '#333'}"></span>
                      <span v-for="(item,i) in enText" :key="'e' + i" :style="{'margin-left': item.isStart ? '40px' : 0}" v-html="item.word" style="color: #333"></span>
                    </template>
                    <template v-else-if="articleType === 4">
                      <span v-html="enHead" :style="{display: 'block',color: '#333'}"></span>
                      <span v-for="(item,i) in enText" :key="'e' + i" :style="{'margin-left': item.isStart ? '40px' : 0}" v-html="item.word" style="color: #333"></span>
                    </template>
                    <template v-else>
                      <span v-for="(item,i) in enText" :key="'e' + i" :style="{'margin-left': item.isStart ? '40px' : 0}" v-html="item.word" style="color: #333"></span>
                    </template>
                  </template>
                </div>
            <!-- </div> -->
            <div class="content-wrap retell-box read-box retell-wrap scrolToMinView" v-show="isReset && model === 1">
              <template v-if="!isControl">
                <template v-if="articleType === 1 || articleType === 5">
                  <span v-html="enHead"  :style="{display: 'block',color: '#333'}"></span>
                  <template v-for="(item,i) in enText">
                    <span class="section" :key="'s' + i" :style="{'margin-left': item.isStart ? '40px' : 0}" :class="{on: readIow === i}" v-html="item.word" @click="handlePlay(i)"></span>
                  </template>
                  <span v-html="enEnd" :style="{float: 'right',overflow: 'hidden',color: '#333'}"></span>
                </template>
                <template v-else-if="articleType === 2">
                  <span v-html="enHead"  :style="{display: 'block','text-align': 'center',color: '#333'}"></span>
                  <template v-for="(item,i) in enText">
                    <span class="section" :key="'s' + i" :style="{'margin-left': item.isStart ? '40px' : 0}" :class="{on: readIow === i}" v-html="item.word" @click="handlePlay(i)"></span>
                  </template>
                  <span v-html="enEnd" :style="{float: 'right',overflow: 'hidden',color: '#333'}"></span>
                </template>
                <template v-else-if="articleType === 3">
                  <span v-html="enHead"  :style="{display: 'block','text-align': 'center',color: '#333'}"></span>
                  <template v-for="(item,i) in enText">
                    <span class="section" :key="'s' + i" :style="{'margin-left': item.isStart ? '40px' : 0}" :class="{on: readIow === i}" v-html="item.word" @click="handlePlay(i)"></span>
                  </template>
                </template>
                <template v-else-if="articleType === 4">
                  <span v-html="enHead" :style="{display: 'block',color: '#333'}"></span>
                  <template v-for="(item,i) in enText">
                    <span class="section" :key="'s' + i" :style="{'margin-left': item.isStart ? '40px' : 0}" :class="{on: readIow === i}"  v-html="item.word" @click="handlePlay(i)"></span>
                  </template>
                </template>
                <template v-else>
                  <template v-for="(item,i) in enText">
                    <span class="section" :key="'s' + i" :style="{'margin-left': item.isStart ? '40px' : 0}" :class="{on: readIow === i}" v-html="item.word" @click="handlePlay(i)"></span>
                  </template>
                </template>
              </template>
            </div>
            <div class="content-wrap retell-box read-box retell-wrap scrolToMinView" v-show="isReset && model === 0">
              <template v-if="!isControl">
              <template v-if="articleType === 1 || articleType === 5 || articleType === 4">
                <span v-html="enHead"  :style="{display: 'block',color: '#333'}"></span>
              </template>
              <template v-if="articleType === 2 || articleType === 3">
                <span v-html="enHead"  :style="{display: 'block','text-align': 'center',color: '#333'}"></span>
              </template>
              <template v-if="articleType === 1 || articleType === 5 || articleType === 2">
                <span v-html="enEnd" :style="{float: 'right',overflow: 'hidden',color: '#333'}"></span>
              </template>
              </template>
            </div>
            <div class="content-wrap listen" v-if="isStart">
              <div class="listen-box">
                <img src="@/assets/composition/listen-icon.png" class="listen-icon" />
                <p class="tips">认真听读音</p>
              </div>
            </div>
            <div class="record" v-if="isPlay || isReset">
              <img src="@/assets/composition/record-play.png" class="play-icon" v-if="!isReset && isPlay && !playing" @click="playVoice('play')"/>
              <img src="@/assets/composition/pause-icon.png" class="play-icon" v-if="!isReset && isPlay && playing" @click="playVoice('pause')"/>
              <div class="record-item" v-if="isReset" @click="handleBackContent">返回</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="scene">
     <div class="scene-btn" :style="{'justify-content': 'space-between'}">
        <div class="scene-btn-item" >
          <span class="ms">{{mmssFilter(seekDuration) }}</span>
          <a-slider  class="voice-range" :value="sliderPercentage"></a-slider>
          <span class="ms">{{ mmssFilter(audioDuration) }}</span>
        </div>
        <div class="scene-btn-item" >
<!--          <span class="num col">{{overNum}}</span>-->
          <span class="control col" :class="{ on: playSpeed == 2 }" @click.stop="changeRate(2)">跟读训练</span>
          <span class="control col" :class="{ on: playSpeed == 3 }" @click.stop="changeRate(3)">盲听训练</span>
        </div>
        <div class="scene-btn-item" v-if="!isPlay && !isStart" @click="handleScene">
          <span class="text">遮挡复述</span>
          <img src="@/assets/word/no-next.png" v-if="readArr.length === enText.length && model === -1"/>
          <img src="@/assets/word/no-next.png" v-else />
        </div>
        <div class="scene-btn-item flex-center"  v-if="isPlay"  @click="handleNext">
          <span class="text" v-if="!isStart">跟读训练</span>
          <span class="text" v-if="isStart">盲听训练</span>
          <img src="@/assets/word/no-next.png"/>
        </div>
      </div>
    </div>
    <div class="mark" v-if="isDetail || isEn"></div>
<!--    <Translates v-if="word !== ''" :isDetail="isDetail" :word="word" @translate="handleCloseDetail"/>-->
<!--    <ScenePop :title="popTitle" :isEn="isEn" type="5" :id="id" :courseId="courseId"  @closePop="handleClosePop" />-->
    <BackTips title="是否退出学习？" :isBack="isBack" :courseId="courseId" :courseType="course_type" type="1" @close="handleClosed"/>
    <audio :src="project_voice" ref="audioWord" />
  </div>
</template>
<script>
// import ScenePop from '../components/ScenePop.vue'
import { Slider } from "ant-design-vue"
import { Popover } from "ant-design-vue"
import {mmssFilter} from "@/utils/vue-filter";
// import Translates from '@/components/Translates.vue'
// import ScenePop from '../components/ScenePop.vue'
import BackTips from '@/views/components/BackTips.vue'
import {storage} from '@/utils/storage.js'
// import { addWord, searchWord } from '@/services/composition.js'
import { Howl } from "howler"
import { mapMutations } from "vuex";
import $ from 'jquery'
import TopBack from "@/views/components/TopBack.vue";
import {toNumber} from "lodash/lang";
import {progressSet} from "@/api/reverse";
export default {
  name: 'keepOut',
  components: {
    TopBack,
    // Translates,
    ASlider: Slider,
    // ScenePop,
    BackTips,
    APopover: Popover
  },
  data () {
    return {
      title: '情景植入',
      popTitle: '开始语音评测吧~',
      isEn: false,
      modelArr: ['查词模式','句子模式'],
      content: '',
      enText: [],
      wordList: [],
      enWord: '',
      courseId: 0,
      id: 0,
      course_type: 0,
      model: -1,
      iNow: -1,
      iStep: -1,
      readArr: [],
      curIndex: -1,
      readIow: -1,
      isBack: false,
      isReset: false,
      isPlay: true,
      isStart: false,
      translates: '',
      project_voice: '',
      prototype_word: '',
      select_word: '',
      isDetail: false,
      word: '',
      isControl: false, // 变频样式
      audioSrc: '',
      audio: {},
      playing: false,
      audioDuration: 0,
      seekDuration: 0,
      seekTimer: null,
      readyTimer: null,
      playCurrentNum1: 0, // 当前播放次数 变频单独次数
      playCurrentNum2: 0, // 当前播放次数
      playCurrentNum3: 0, // 当前播放次数
      playSpeed: 2,
      voice_rate: [],
      articleType: 0,
      userid: 0,
      enHead: '',
      enEnd: '',
      index: 0, // 查词第几句
      wordIndex: 0, // 查词第几个词
      detail: false,
      activeWord: '',
      visibleKey: -1,
      search: []
    }
  },

  computed: {
    sliderPercentage: function() {
      // console.log(Math.ceil((this.seekDuration / this.audioDuration) * 93)+7)
      return this.seekDuration < 1 ? 0 : Math.ceil((this.seekDuration / this.audioDuration) * 93)+7;
    },
    overNum: function() {
      return this.voice_rate.length - this[`playCurrentNum${this.playSpeed}`];
    }
  },
  created () {
    if (this.$route.query.userid) {
      let { courseId, userid, course_type } = this.$route.query
      this.courseId = +courseId
      this.id = +userid
      this.userid =this.$route.query.userid
      this.course_type = +course_type
      let pms ={
        id:this.$route.query.id,
        userId:this.$route.query.userid,
        progress:4,
        state:0,
      }
      progressSet(pms).then((res)=>{
       let ModeListInfo = storage.get('ModeListInfo')
       ModeListInfo = {
         ...ModeListInfo,
         num:res.data.num
       }
       storage.set('ModeListInfo', ModeListInfo)
      })
    }
    let data = storage.get('sceneData')
    if (data) {
      this.content = data
      this.project_voice = 'https://yypx-1331574292.cos.ap-beijing.myqcloud.com/'+this.content.voiceFile
      this.voice_rate = this.content[`voice_rate_${this.playSpeed}`]
      this.articleType = data.type
      let enText = data.sentence
      if (this.articleType === 1 || this.articleType === 5 || this.articleType === 2) {
        this.enHead = enText.splice(0,1).join('').replace('##','')
        this.enEnd = enText.pop()
        if (this.enEnd.indexOf('##')) {
          this.enEnd = this.enEnd.replace('##','<br/>')
        }
      } else if (this.articleType === 3 || this.articleType === 4) {
        this.enHead = enText.splice(0,1).join('').replace('##','')
      }
      let search = []
      enText.map(item => {
        let word = item.split(' ')
        word.map(elem => {
          let obj = {}
          if (elem.indexOf('&&') !== -1) {
            elem = elem.replace('&&','')
            obj.isStart = 1
            obj.word = elem + ' '
            search.push(obj)
          } else if (elem.indexOf('##') !== -1) {
            obj.isStart = 0
            elem = elem.replace('##','<span style="display:block"></span>')
            obj.word = elem + ' '
            search.push(obj)
          } else {
            obj.isStart = 0
            obj.word = elem + ' '
            search.push(obj)
          }
        })
      })
      this.search = search
      let enArr = []
      // let wordArr = []
      enText.map(item => {
        item = item.replace(/\.(\s*)/, '.')
        let obj = {}
        // let obj1 = {}
        // let wordList = []
        let val = ''
        let val2 = ''
        if (item.indexOf('&&') !== -1 && item.indexOf('##') !== -1) {
          let val1 = item.replace('&&', '')
          val2 = item
          val = val1.replace('##','<br>')
          obj.word = val
          obj.isRead = false
          obj.isNum = 0
          obj.isStart = true
          enArr.push(obj)
        } else if (item.indexOf('&&') !== -1) {
          val = item.replace('&&', '')
          val2 = item
          obj.word = val
          obj.isRead = false
          obj.isNum = 0
          obj.isStart = true
          enArr.push(obj)
        } else if (item.indexOf('##') !== -1) {
          val2 = item
          val = item.replace('##','<br>')
          obj.word = val
          obj.isRead = false
          obj.isNum = 0
          obj.isStart = false
          enArr.push(obj)
        } else {
          val = item
          val2 = item
          obj.word = val
          obj.isRead = false
          obj.isNum = 0
          obj.isStart = false
          enArr.push(obj)
        }
      })
      this.enText = enArr
    }
    document.addEventListener('scroll', this.bodyClick, true)
  },
  beforeDestroy() {
    this.audio.pause()
    document.removeEventListener('scroll', this.bodyClick, true)
  },
  mounted() {
    let vm = this;
    this.audio = new Howl({
      src: vm.project_voice,
      html5: true,
      loop: false,
      tooltip: false,
      onplay: function() {
        //sound playing
        vm.playing = true;
        vm.seekTimer = setInterval(() => {
          vm.audioDuration = this.duration();
          vm.seekDuration = this.seek();
        }, 1000);
      },
      onload: function() {
        vm.audioDuration = this.duration();
      },
      onpause: function() {
        vm.playing = false;
      },
      onend: function() {
        // console.log("end");
        vm.playing = false;
        // vm[`playCurrentNum${vm.playSpeed}`] += 1;
        // // 暂时排查不出问题，end 时候先手动set 为 100%
        // if (vm[`playCurrentNum${vm.playSpeed}`] === 3) {
        //   vm.$refs.readyPoint.style.display = "none"
        //   return
        // }
        // vm.seekDuration = this.duration();
        // clearInterval(vm.seekTimer);
        // vm.$nextTick(() => {
        //   vm.playVoice("play");
        // });
      },
    });
  },
  methods: {
    toNumber,
    mmssFilter,
    ...mapMutations(["setTranslateModal"]),
    bodyClick(e) {
      if (e === 'body') {
        this.visibleKey = -1
      }
      if (!window[`bs:event:scroll:close`]) {
        // console.log('--------------   close pop')
        this.visibleKey = -1
      }
    },
   handleSelect (item,i) {
     this.curIndex = i
     if (!item.isRead) {
       if (i > this.iStep + 1) {
         this.$message.error('此句还未解锁')
         return
       }
       if (this.readArr.indexOf(i) === -1) {
          this.readArr.push(i)
       }
       if (item.isNum === 0) {
          //  item.isNum++
          this.iStep++
          this.iNow = this.iStep
          let obj = this.enText[this.iNow]
          this.$set(obj, 'isRead', true)
          this.$set(obj, 'isNum', 1)
        } else {
          this.iNow = i
          let obj = this.enText[this.iNow]
          this.$set(obj, 'isRead', true)
        }

     } else {
       this.iNow = i
       let obj = this.enText[this.iNow]
       this.$set(obj, 'isRead', false)
     }
   },
   async playVoice(status) {
     if (this.playSpeed === 2){
       this.isStart = false
     }else {
       this.isStart = true
     }
      // if (this[`playCurrentNum${this.playSpeed}`] === 3) {
      //   this[`playCurrentNum${this.playSpeed}`] = 0
      // }
      // let playCurrent = this.voice_rate[this[`playCurrentNum${this.playSpeed}`]]
      if (status === "play" || status === "autoPlay") {
        // await this.readyFun();
      //   this.audio.rate(playCurrent.speed);
        this.audio.play();
      } else {
        this.audio.pause();
      }
    },
  readyFun() {
      let time = 0;
      if (this.readyTimer) {
        clearInterval(this.readyTimer);
      }
      this.$refs.readyPoint.style.display = "block";
      let points = this.$refs.readyPoint.children;
      points[0].style.visibility = "visible";
      points[2].style.visibility = "visible";
      points[1].style.visibility = "visible";
      // ============英文显示逻辑先放这吧=============
      if (this.playSpeed === 2) {
        if (this.playCurrentNum2 === 1) {
          this.isStart = true
        } else {
          this.isStart = false
        }
      }
      if (this.playSpeed === 3) {
        this.isStart = true
      }
      // =========================
      return new Promise((rev) => {
        this.readyTimer = setInterval(() => {
          time += 200;
          if (this.voice_rate[this[`playCurrentNum${this.playSpeed}`]]){

            let totalReadyTime = this.voice_rate[this[`playCurrentNum${this.playSpeed}`]].time * 1000;
            if (time >= totalReadyTime * (1 / 3)) {
              points[2].style.visibility = "hidden";
            }
            if (time >= totalReadyTime * (2 / 3)) {
              points[1].style.visibility = "hidden";
            }
            if (time >= totalReadyTime) {
              points[2].style.visibility = "visible";
              points[1].style.visibility = "visible";
              this.$refs.readyPoint.style.display = "none";
            }
            if (time > totalReadyTime) {
              rev(true);
              clearInterval(this.readyTimer);
            }

          }
        }, 200);
      });
    },
   changeRate(rate) {
     this.isStart = false
     this.playing = false
      this.playSpeed = rate
      // console.log(this.content)
      this.voice_rate = this.content[`voice_rate_${this.playSpeed}`]
      // 支持多音频播放所以先停掉吧  目前没发现问题
      this.audio.stop();
      this.playVoice("play");
    },
   handlePlay (i) {
     this.readIow = i
     setTimeout(() => {
      this.handlePlayWord()
     },10)
   },
   handlePlayWord () {
     let audioWord = this.$refs.audioWord
     audioWord.play()
   },
   handleChangeModel (i) {
      // this.visibleKey = -1
      this.model = i
      this.isReset = true
      this.readIow = -1
      this.detail = false
      if (i === 0) {
        this.$refs.audioWord.pause()
      }
      $(".ant-popover").empty();
      $('.ant-popover-open').removeClass('ant-popover-open')

   },
   handleScene () {
     this.isControl = true
     this.isPlay = true
     this.isReset = false
   },
   handleBack () {
     this.isBack = true
   },
    handleClosed (val) {
      this.isBack = val
    },
    handleNext () {
      // this.isEn = true
      this.$router.push({
        path: "/composition/uploadIndex",
        query: {
          userid:this.userid,
          id:this.$route.query.id,
        },
      });
    },
    handleClosePop (val) {
      this.isEn = val
    },
    handleBackContent () {
      this.isReset = false
      this.model = -1
      this.detail = false
      this.$refs.audioWord.pause()
    }
  }
}
</script>
<style scoped>
.content-wrap{
  height: 100%;
  text-align: left;
  padding: 0 60px 60px 80px;
  overflow-y: auto;
  overflow-x: hidden;
}
.listen-box{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  img{
    width: 92px;
    height: 70px;
  }
  .tips{
    font-size: 20px;
    font-weight: 400;
    color: #27bfa3;
    margin-top: 26px;
  }
}
.main-box{
  position: relative;
  display: flex;
  margin-top: 30px;
  justify-content: center;
  width: inherit;
}
.main-box-item{
  position: relative;
  width: 800px;
  height: 100%;
  background: #fff;
  border-radius: 10px;
}
.content{
  padding: 18px 10px 12px 0;
  height: 530px;
}
.yxp-course{
  width: 100%;
  height: 100%;
  background: #F0F2F4;
}

  .listen-item {
      position: absolute;
      left: 80px;
      top: 30px;
      text-align: center;
      display: none;
      z-index: 10;
        span {
          display: inline-block;
          width: 12px;
          height: 12px;
          background: #FF8000;
          border-radius: 6px;
          margin-right: 10px;
        }
      }
  .read-box {
    span {
      position: relative;
      color: #333;
    }
  }
  .retell-wrap-scroll {
    overflow: auto;
  }
  .retell-wrap {
    height: calc(100% - 90px) !important;
    padding-bottom: 10px !important;
  }
  .keep-box {
    color: #666 !important;
    padding-bottom: 48px !important;
  }
  .retell-box {
    overflow: auto;
    padding: 30px;
    .section {
      margin-right: 5px;
    }
    span {
        font-size: 20px;
        font-weight: 400;
        cursor: pointer;
        word-break: break-word;
        em {
          position: relative;
          margin-right: 6px;
        }
      }
      .on {
        color: #27BFA3!important;
      }
      .active {
        color: #DFE5EA;
        background: #DFE5EA;
      }
      .read {
        color: #333;
      }
  }
   .listen {
      position: relative;
      background: #fff;

      &-box {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        text-align: center;
        .listen-icon {
          width: 92px;
          height: 70px;
        }
        .tips {
          font-size:20px;
          font-weight:400;
          color: #27BFA3;
          margin-top: 26px;
        }
      }
    }
.scene{
  display: flex;
  width: 100%;
}
.scene-btn-item{
  display: flex;
  align-items: center;
}
.scene-btn {
  display: flex;
  height: 80px;
  align-items: center;
  width: 800px;
  margin: 0 auto;
  .scene-btn-item {
      .ms {
        font-size:16px;
        font-weight:400;
        color: #27BFA3;
      }
      .voice-range {
        width: 180px; /* no */
        margin: 0 10px;
      }
      .num {
        width: 24px;
        height: 24px;
        text-align: center;
        line-height: 22px;
        color: #27BFA3;
        border: 1px solid #27BFA3;
        border-radius: 12px;
        margin-right: 20px;
      }
      .col {
        font-size:14px;
        font-weight:400;
        text-align: center;
      }
      .on {
        color: #fff !important;
        background: #27BFA3;
      }
      .control {
        width: 84px;
        height: 29px;
        line-height: 29px;
        color: #27BFA3;
        border: 1px solid #27BFA3;
        border-radius: 18px;
        margin-right: 10px;
        &:last-child {
          margin-right: 0;
        }
      }
    }
    .text {
      color: #27BFA3;
      font-size: 20px;
      font-weight: 400;
    }
    img {
      width: 40px;
      height: 40px;
    }
  }
  .record {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 90px;
      //background: #fff;
      opacity: .94;
      .play-icon {
        display: block;
        width: 80px;
        height: 80px;
        margin: 10px auto 0;
        opacity:1;
      }
      &-item {
        width: 130px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-size:18px;
        font-weight:400;
        color: #fff;
        background: #27BFA3;
        border-radius: 100px;
        margin: 20px auto;
        opacity: 1;
      }
    }

.scene-wrap {
  position: fixed;
  left: 0;
  top: 80px;
  width: 100%;
  height: 100%;
  background: #F0F2F4;
  background-size: cover;
  .scene-box {
    display: flex;
    justify-content: center;
    padding: 30px 95px;
  }
  .scene-content {
    position: relative;
    width: 800px;
    height: 600px;
    background: #fff;
    border-radius: 10px;
    margin: 0 auto;
    overflow: hidden;
    .listen-item {
      position: absolute;
      left: 80px;
      top: 30px;
      display: none;
        span {
          display: inline-block;
          width: 12px;
          height: 12px;
          background: #FF8000;
          border-radius: 6px;
          margin-right: 10px;
        }
      }
    .close {
      position: absolute;
      right: 20px;
      top: 20px;
      width: 20px;
      height: 20px;
      cursor: pointer;
    }
    .listen {
      position: relative;
      background: #fff;

      &-box {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        text-align: center;
        .listen-icon {
          width: 92px;
          height: 70px;
        }
        .tips {
          font-size:20px;
          font-family:Microsoft YaHei;
          font-weight:400;
          color: #27BFA3;
          margin-top: 26px;
        }
      }
    }
    .content {
      position: relative;
      height: 100%;
      overflow: auto;
      text-align: left;
      padding: 50px 80px 160px;


    }

  }
  .flex-center {
    justify-content: center;
  }
  .flex {
    justify-content: space-between !important;
  }



}
/**弹窗 */
  .yxp-scene-pop {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 500px;
    height: 500px;
    background: #fff;
    border-radius: 10px;
    padding-left: 50px;
    padding-right: 50px;
    .close {
      position: absolute;
      right: 20px;
      top:20px;
      width: 20px;
      height: 20px;
      cursor: pointer;
    }
    .title {
      font-size: 30px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #333;
      margin-top: 50px;
      img {
        display: inline-block;
        vertical-align: middle;
        width: 32px;
        height: 29px;
        margin-right: 6px;
      }
    }
    .content {
      text-align: left;
      margin-top: 58px;
      .title {
        font-size: 24px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #333;
      }
      .detail {
        font-size: 24px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333;
        margin-top: 30px;
      }
    }
    .btn {
      width: 280px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #fff;
      background: #27BFA3;
      border-radius: 100px;
      margin: 40px auto 0;
      cursor: pointer;
    }
  }
  .yxp-scene-audio {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 600px;
    height: 400px;
    background: #fff;
    border-radius: 10px;
    .close {
      position: absolute;
      right: 20px;
      top: 20px;
      width: 20px;
      height: 20px;
      cursor: pointer;
    }
    .btn {
      width: 269px;
      height: 60px;
      line-height: 60px;
      text-align: center;
      font-size: 24px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #fff;
      background: #3BC9A4;
      border-radius: 100px;
      margin: 290px auto 0;
      cursor: pointer;
    }
  }
  .detail {
          position: absolute;
          width: 280px;
          height: 163px;
          background: #27BFA3;
          border-radius: 6px;
          padding-left: 20px;
          padding-right:20px;
          z-index: 1000;
          display: none;
          &::after {
            position: absolute;
            left: 50%;
            top: -20px;
            transform: translateX(-50%);
            display: block;
            content: '';
            width: 0;
            height: 0;
            border-top: 12px solid transparent;
            border-right: 12px solid transparent;
            border-bottom: 12px solid #27BFA3;
            border-left: 12px solid transparent;
          }
          .word-icon {
            position: absolute;
            right: 10px;
            top: 10px;
            width: 14px;
            height: 14px;
            background: url(@/assets/composition/word-close-icon.png) no-repeat;
            background-size: 14px 14px;
            cursor: pointer;
          }
          .en {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            font-size:24px;
            font-weight:bold;
            color: #fff;
            margin-top: 25px;
            img {
              width: 14px;
              height: 11px;
              margin-left: 15px;
            }
          }
          .zh {
            font-size:16px;
            font-weight:400;
            color: #fff;
            text-align: left;
            margin-top: 10px;
          }
          .btn {
            display: flex;
            justify-content: space-between;
            align-self: center;
            margin-top: 20px;
            .grey {
              color: #60CEB9 !important;
              border-color: #60CEB9 !important;
            }
            &-item {
              width:120px;
              height:33px;
              line-height: 33px;
              font-size:14px;
              font-weight:400;
              color: #99E2D4;
              border:1px solid rgba(153,226,212,1);
              border-radius:6px;
              img {
                display: inline-block;
                vertical-align: middle;
                width: 16px;
                height: 16px;
                margin-left: 10px;
                margin-right: 10px;
              }
              &:first-child {
                margin-right: 20px;
              }
            }
          }
        }

</style>